<template>
	<view class="address">
		<my-header title="地址管理">
			<template #menu>
				<text></text>
			</template>
		</my-header>
		<my-content class="content">
			<view style="visibility: hidden">x</view>
			<view class="address_box">
				<view @click="selectAddress(item)" class="address_item" v-for="item in addressData" :key="item.id">
					<view class="address_top">
						<view class="address_top_content">
							<view class="address_info">
								{{ item.province }}{{ item.city }}{{ item.area }}{{ item.detail }}</view>

							<view class="user_info">
								<view class="username">{{ item.username }}</view>
								<view class="mobile">{{ item.mobile }}</view>
							</view>

						</view>
					</view>
					<view class="address_bottom">
						<view class="address_default" v-if="item.status == 1">默认</view>
						<view class="address_default un_default" v-else></view>
						<view class="address_action">
							<view class="address_action_del" @click.stop="delAddress(item.id)">删除</view>
							<!-- <view class="address_action_split">|</view> -->
							<view class="address_action_edit" @click.stop="header(`/pages/address/edit?id=${item.id}`)">
								编辑</view>
						</view>
					</view>
				</view>
			</view>
			<view @click="header(`/pages/address/add`)"
				style="font-size: 30rpx;width: 300rpx;height: 100rpx;border:1rpx solid #ccc; text-align: center;line-height: 100rpx;border-radius: 25rpx; color: #fff;position: fixed;bottom: 100rpx;left: 0;right: 0;margin: auto;">
				添加地址</view>
			<view style="visibility: hidden; margin-top: 60rpx">1</view>

			<!--      <view class="add_btn" @click="header(`/pages/address/add`)">新增地址</view>-->
		</my-content>
		<my-alert-dialog ref="alertDialog" title="提示" content="确定删除地址吗？" @confirm="handleConfirm"></my-alert-dialog>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				addressData: [],
				page: 1,
				lastPage: 1,
				resource: 'address',
			}
		},
		onLoad(option) {
			this.resource = option.resource || 'address'
			this.getAddress()
		},
		onShow() {},

		methods: {
			getAddress() {
				uni.showLoading({
					title: '数据加载中',
				})
				api.userAddress
					.index({
						page: this.page
					})
					.then((res) => {
						if (res.code === 200) {
							uni.hideLoading()
							this.addressData = res.data.data
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			handleConfirm({
				id,
				index
			}) {
				uni.showLoading({
					title: '数据删除中~',
				})
				api.userAddress
					.del(id)
					.then((res) => {
						if (res.code === 200) {
							uni.hideLoading()
							this.addressData.splice(index, 1)
							this.show('删除成功')
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			delAddress(id, index) {
				this.$refs.alertDialog.show({
					id,
					index
				})
			},
			selectAddress(item) {
				if (this.resource == 'order') {
					let pages = getCurrentPages()
					let currPage = pages[pages.length - 1] //当前页面
					let prevPage = pages[pages.length - 2]
					prevPage.$vm.addressData = item // 修改上一页面的address_id
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						})
					}, 500)
				}
			},
		},
	}
</script>

<style lang="scss">
	.address {
		background-color: #000;
		min-height: 100vh;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;

		/* padding-top: 80rpx; */

		.address_box {
			display: flex;
			flex-direction: column;
			overflow-y: scroll;

			.address_item {
				margin: 0 20rpx 20rpx 20rpx;
				background-color: #030522;
				border-radius: 10rpx;
				color: white;
				padding: 0 10rpx;

				.address_top {
					display: flex;
					flex-direction: column;
					height: 140rpx;
					justify-content: center;
					border-bottom: 1rpx solid #292929;
					margin: 0 20rpx;

					.address_top_content {
						height: 140rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.user_info {
							display: flex;
							margin-top: 20rpx;

							.username {
								font-size: 32rpx;
								margin-right: 8rpx;
							}

							.mobile {
								align-self: flex-end;
								font-size: 25rpx;
							}
						}

						.address_info {
							color: #fff;
							font-size: 28rpx;
						}
					}
				}

				.address_bottom {
					display: flex;
					justify-content: space-between;
					height: 80rpx;
					align-items: center;
					margin: 0 20rpx;

					.address_default {
						background-color: #2E3155;
						font-size: 24rpx;
						/* padding: 4rpx 12rpx; */
						border-radius: 4rpx;
						height: 32rpx;
						text-align: center;
						width: 72rpx;
						color: #fff;

						&.un_default {
							background-color: transparent;
						}
					}

					.address_action {
						display: flex;
						align-items: center;
						color: #999;
						font-size: 28rpx;

						.address_action_edit {
							color: #EE5093;
							margin-left: 80rpx;
						}

						.address_action_split {
							margin: 0 20rpx;
						}
					}
				}
			}
		}

		.add_btn {
			background: url('https://www.dingxians.cn/upload/images/common/btn-primary.png');
			background-size: 100% 100%;
			position: fixed;
			bottom: 10rpx;
			width: 90%;
			left: 5%;
			// border-radius: 10rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
</style>